<template>
    <div>
      <div :class="$style.headImage">
        <v-icon @click='$proxyFile' name='shangchuan' :size = '36' ></v-icon>
        <div>
          <img :src="photo"  >
          <p class="b_FS-36 c_white" >{{ userName }}</p>
        </div>
        <v-icon @click='$skipUserCenter' name='home' :size = '45' ></v-icon>
      </div>
      <input style="width: 0;height: 0" ref="fileinput" type="file" accept="image/gif,image/jpg,image/jpeg,image/bmp,image/png" @change ="$updatePhoto($event)" >
      <mt-actionsheet

        v-model="sheetVisible"
        :actions="actions"
      ></mt-actionsheet>

    </div>
</template>
<script>
    import { initCos, uploadImage } from './imageUpload.js'
    import { Actionsheet, Toast } from 'mint-ui'
    import Vue from 'vue'
    Vue.component(Actionsheet.name, Actionsheet)
    export default{
        data(){
            return{
              userName : '' ,
              photo: '' ,
              sheetVisible: false ,
              actions : [{name:'修改头像', method:this.$proxyFile },{ name:  '前往个人中心' , method:this.$skipUserCenter }]
            }
        },
        components:{},
        async mounted(){
          initCos()
          let res = await this.$get('/api/user/info', {})
          if(res){
            this.photo = res.data.headImgUrl || 'http://ccnf-im-1255573444.cos.ap-guangzhou.myqcloud.com/1530668309751.jpg'
            this.userName = res.data.userName
          }
        },
        methods:{
          $proxyFile(){
            this.$refs.fileinput.click()
          },
          $updatePhoto(e){
            const file = e.target.files[0]
            uploadImage(file, async (url)=>{
              let res = await this.$post('/api/user/headImage/update', {
                url : 'http://' + url
              })
              .catch(res=>{
                Toast(res.msg)
              })
              if( res ){
                this.photo = 'http://' + url
                Toast('上传成功')
              }
            })
          },
          $skipUserCenter(){
            this.$router.push('/task')
          }
        }
    }
</script>
<style lang='scss' module >
  .headImage{
    width: 550px ;
    height: 330px ;
    text-align: center;
    display: flex;
    align-content: center;
    align-items: center;
    >*{
      flex: 1 ;
    }
    img{
      width: 140px ;
      height: 140px ;
      border-radius: 100% ;
      border:8px solid white;
      margin-top: 20px;
      margin-bottom: 40px;
      box-shadow: 0px 15px 10px #26a2ff;
    }
    >p{
      width: 100%;
      text-align: center;
    }
  }
</style>
